<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <script src="https://unpkg.com/vue@next"></script>
</head>

<body>
  <div id="root"></div>
  <script>
    //动态组件：根据数据的变化，结合component这个标签，来随时动态切换组件
    const app = Vue.createApp({
      data(){
        return{
          current:'inputItem'
        }
      },
      methods:{
        click(){
          this.current==='inputItem'?this.current='common':this.current='inputItem'
        }
      },
      // template:`<keep-alive><component :is="current"/></keep-alive><button @click="click">切换</button>`
      template:`<async/>`
    });

    app.component('inputItem', {
      template:`<input/>`
    });
    app.component('common',{
      template:`<div>hello</div>`
    })
    app.component('async',Vue.defineAsyncComponent(()=>{
      return new Promise((resolve,reject)=>{
        setTimeout(()=>{
          resolve({
            template:`<div>async component</div>`
          })
        },4000)
      })
    }))
    const vm = app.mount('#root');
  </script>
</body>

</html>